<template>
	<view>
		<!-- 今日必读 -->
		<view class="read-contain">
			<view class="read-title">
				<view class="title-body">
					新书上架
				</view>
				<view class="read-right">
				换一换
				<u-icon name="reload" size="24"></u-icon>
				</view>
			</view>
			<!-- 图片区域 -->
			<view class="content-image-body">
			
			<block   v-for="(item1,i1) in newList" :key="i1">
				<view class="content-image" >
					<image :src="item1.image_src" ></image>
					<text>{{item1.name}}</text>
					<view class="text-name">
						{{item1.text}}
					</view>
				</view>
			</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {bodyList ,newList} from "../../utils/bodyList.js"
	export default {
		name:"new-book",
		data() {
			return {
				newList:newList
			};
		}
	}
</script>

<style lang="scss" scoped>
.read-contain{
	
	.read-title{
		display: flex;
		justify-content: space-between;
		.title-body{
			font-size: 40rpx;
			color: #2979FF;
			font-weight: 800;
			font-family: "宋体";
			margin: 30rpx;
		}
		.read-right{
			color: gray;
			margin: 30rpx;
			
		}
	}
	.content-image-body{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// width: 33.3%;
			margin: 20rpx;
	.content-image{
		display: flex;
		
		flex-direction: column;
		margin: 20rpx 10rpx;
		width: 150rpx;
		height: 320rpx;
		.text-name{
			color: gray;
			margin: 10rpx;
		}
		text{
			margin-top: 10rpx;
			font-size: 24rpx;
		}
		image {
			width: 150rpx;
			height: 250rpx;
			// margin-right: 30rpx;
			border-radius: 10rpx;
		}
	}
	}
}
</style>
